﻿<script>
export default {
  name: "TreeItem", // 在引用自身的时候是必须的
  props: {
    model: Object,
  },
  data() {
    return {
      isOpen: false,
    };
  },
  computed: {
    isFolder() {
      return this.model.children && this.model.children.length;
    },
  },
  methods: {
    toggle() {
      if (this.isFolder) {
        this.isOpen = !this.isOpen;
      }
    },
    changeType() {
      if (!this.isFolder) {
        this.model.children = [];
      }
      this.addChild();

    },
    addChild() {
      var child = {
        name: "新章节页",
        markdowntext: "",
        outtext: ""
      }
      this.model.children.push(child);
      child.parent = this;
    },
    removeChild() {
      this.model.parent.model.children.pop(this)
    }
  },
};
</script>

<template>
  <nav class="navbar navbar-light bg-light row">
    <div class="container-fluid ">
      <div class="col">
        <!-- <button class="btn btn-outline-success " data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown1"
          aria-expanded="false" aria-label="Toggle navigation" @click="toggle" v-if="isFolder">{{ isOpen ? "隐藏" : "展开"
          }}</button> -->

        <label style="filter:alpha (opacity=50); opacity:0.5;" >{{model.name}}</label>
        <!-- <button class="btn  " @click="changeType">+</button>
        <button class="btn  " @click="removeChild">×</button> -->
      </div>

      <!-- <div class="collapse navbar-collapse" id="navbarNavDropdown1">
        <nav class="navbar-nav me-auto mb-2 mb-lg-0" name="fade"> -->
          <!--
              一个可以通过其“name”选项递归渲染自己的组件，
              (如果使用单文件组件，则从文件名推断)
            -->
          <TreeItem  v-for="model in model.children" :model="model" :key="model">
          </TreeItem>

        <!-- </nav>
      </div> -->
    </div>
  </nav>
</template>
